import { useState } from "react";
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
import { motion } from "framer-motion";

const classData = [
  { id: 1, name: "高一(1)班", createdAt: "2023-09-01", studentCount: 45 },
  { id: 2, name: "高一(2)班", createdAt: "2023-09-01", studentCount: 42 },
  { id: 3, name: "高二(1)班", createdAt: "2022-09-01", studentCount: 48 },
];

const studentDistribution = [
  { name: "高一(1)班", 人数: 45 },
  { name: "高一(2)班", 人数: 42 },
  { name: "高二(1)班", 人数: 48 },
];

export default function ClassManagement() {
  const [showQR, setShowQR] = useState<number | null>(null);

  const generateQRCode = (classId: number) => {
    setShowQR(classId === showQR ? null : classId);
  };

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-bold text-[#2C3E50]">班级管理</h2>
        <button className="bg-[#E74C3C] hover:bg-[#c0392b] text-white px-4 py-2 rounded-lg">
          <i className="fas fa-plus mr-2"></i>创建班级
        </button>
      </div>

      {/* 班级列表 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {classData.map((cls) => (
          <motion.div
            key={cls.id}
            whileHover={{ y: -5 }}
            className="bg-white rounded-lg shadow-md p-6"
          >
            <h3 className="text-xl font-semibold mb-2">{cls.name}</h3>
            <p className="text-gray-600 mb-4">
              创建时间: {cls.createdAt} | 学生人数: {cls.studentCount}
            </p>
            
            <div className="flex space-x-3">
              <button
                onClick={() => generateQRCode(cls.id)}
                className="bg-[#2C3E50] hover:bg-[#1a2635] text-white px-3 py-1 rounded text-sm"
              >
                <i className="fas fa-qrcode mr-1"></i>生成二维码
              </button>
              <button className="border border-[#2C3E50] text-[#2C3E50] hover:bg-gray-100 px-3 py-1 rounded text-sm">
                <i className="fas fa-list mr-1"></i>查看成员
              </button>
            </div>

            {showQR === cls.id && (
              <motion.div
                initial={{ opacity: 0, scale: 0.8 }}
                animate={{ opacity: 1, scale: 1 }}
                className="mt-4 p-3 bg-gray-100 rounded flex justify-center"
              >
                <div className="w-32 h-32 bg-white p-2 flex items-center justify-center">
                  <i className="fas fa-qrcode text-5xl text-gray-400"></i>
                </div>
              </motion.div>
            )}
          </motion.div>
        ))}
      </div>

      {/* 学生分布图表 */}
      <div className="bg-white rounded-lg shadow-md p-6 mt-8">
        <h3 className="text-xl font-semibold mb-4 text-[#2C3E50]">班级学生分布</h3>
        <div className="h-64">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart data={studentDistribution}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="name" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Bar dataKey="人数" fill="#2C3E50" />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </div>
    </div>
  );
}
